<template>
  <div>
    <div @click="chaxun()">
      <van-search :value="sousuo" shape="round" background="#54DF39" placeholder="请输入搜索关键词" />
    </div>

    <mt-swipe :auto="4000">
      <mt-swipe-item>
        <img v-lazy="poot+'miaozishangchengFile/lunbotu/lbt1.jpg'" />
      </mt-swipe-item>
      <mt-swipe-item>
        <img v-lazy="poot+'miaozishangchengFile/lunbotu/lbt2.jpg'" />
      </mt-swipe-item>
      <mt-swipe-item>
        <img v-lazy="poot+'miaozishangchengFile/lunbotu/lbt3.jpg'" />
      </mt-swipe-item>
      <mt-swipe-item>
        <img v-lazy="poot+'miaozishangchengFile/lunbotu/lbt4.jpg'" />
      </mt-swipe-item>
    </mt-swipe>

    <div class="imglb">
      <mt-swipe :auto="2000" :show-indicators="false">
        <mt-swipe-item>
          <van-grid column-num="5">
            <van-grid-item text="文字">
              <img src="@/assets/wangge/电视.gif" class="imgwg" />
              <font class="wgzt">电视</font>
            </van-grid-item>
            <van-grid-item text="文字">
              <img src="@/assets/wangge/智能.gif" class="imgwg" />
              <font class="wgzt">智能</font>
            </van-grid-item>
            <van-grid-item text="文字">
              <img src="@/assets/wangge/K30 Pro.gif" class="imgwg" />
              <font class="wgzt">K30 Pro</font>
            </van-grid-item>
            <van-grid-item text="文字">
              <img src="@/assets/wangge/笔记本.gif" class="imgwg" />
              <font class="wgzt">K30 Pro</font>
            </van-grid-item>
            <van-grid-item text="文字">
              <img src="@/assets/wangge/家电.gif" class="imgwg" />
              <font class="wgzt">家电</font>
            </van-grid-item>
            <van-grid-item text="文字">
              <img src="@/assets/wangge/新品.gif" class="imgwg" />
              <font class="wgzt">新品</font>
            </van-grid-item>
            <van-grid-item text="文字">
              <img src="@/assets/wangge/众筹.gif" class="imgwg" />
              <font class="wgzt">众筹</font>
            </van-grid-item>
            <van-grid-item text="文字">
              <img src="@/assets/wangge/手机.gif" class="imgwg" />
              <font class="wgzt">手机</font>
            </van-grid-item>
            <van-grid-item text="文字">
              <img src="@/assets/wangge/秘境之旅.gif" class="imgwg" />
              <font class="wgzt">秘境之旅</font>
            </van-grid-item>
            <van-grid-item text="文字">
              <img src="@/assets/wangge/助力砍价.gif" class="imgwg" />
              <font class="wgzt">助力砍价</font>
            </van-grid-item>
          </van-grid>
        </mt-swipe-item>
        <mt-swipe-item>
          <van-grid column-num="5">
            <van-grid-item text="文字">
              <img src="@/assets/wangge/秒杀.jpg" class="imgwg" />
              <font class="wgzt">秒杀</font>
            </van-grid-item>
            <van-grid-item text="文字">
              <img src="@/assets/wangge/以旧换新.jpg" class="imgwg" />
              <font class="wgzt">以旧换新</font>
            </van-grid-item>
            <van-grid-item text="文字">
              <img src="@/assets/wangge/黑鲨新品.jpg" class="imgwg" />
              <font class="wgzt">黑鲨新品</font>
            </van-grid-item>
            <van-grid-item text="文字">
              <img src="@/assets/wangge/米粉卡.jpg" class="imgwg" />
              <font class="wgzt">米粉卡</font>
            </van-grid-item>
            <van-grid-item text="文字">
              <img src="@/assets/wangge/一分拼团.jpg" class="imgwg" />
              <font class="wgzt">一分拼团</font>
            </van-grid-item>
            <van-grid-item text="文字">
              <img src="@/assets/wangge/生活周边.jpg" class="imgwg" />
              <font class="wgzt">生活周边</font>
            </van-grid-item>
            <van-grid-item text="文字">
              <img src="@/assets/wangge/企业购.jpg" class="imgwg" />
              <font class="wgzt">企业购</font>
            </van-grid-item>
            <van-grid-item text="文字">
              <img src="@/assets/wangge/智能宝典.jpg" class="imgwg" />
              <font class="wgzt">智能宝典</font>
            </van-grid-item>
            <van-grid-item text="文字">
              <img src="@/assets/wangge/耗材专区.jpg" class="imgwg" />
              <font class="wgzt">耗材专区</font>
            </van-grid-item>
            <van-grid-item text="文字">
              <img src="@/assets/wangge/路由家族.jpg" class="imgwg" />
              <font class="wgzt">路由家族</font>
            </van-grid-item>
          </van-grid>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <van-divider
      contentPosition="center"
      customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
    >热门产品</van-divider>
    <shop shop="selectcommodity"></shop>
  </div>
</template>
<script>
import Header from "@/components/Headergl/Header";
import shop from "@/components/shop";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return {
      title: "首页",
      sousuo: ""
    };
  },
  components: {
    Header: Header,
    shop: shop
  },
  computed: {
    ...mapState(["poot"]),
    ...mapState(["yx"]),
    ...mapState(["zhuantai"])
  },
  methods: {
    ...mapMutations(["xg"]),
    ...mapMutations(["userxg"]),
    ...mapMutations(["yxxg"]),
    ...mapMutations(["xggwcsz"]),
    chaxun() {
      this.$router.push("/chaxun");
      this.xg(true);
    }
  },
  mounted() {
    this.xg(false);
  }
};
</script>
<style scoped>
.mint-swipe {
  height: 200px;
}
.imglb {
  margin-top: 10px;
}
img {
  width: 100%;
  height: 100%;
}
.imgwg {
  height: 80%;
  width: 80%;
}
.wgzt {
  font-size: 5px;
  margin-top: 5px;
}
</style>